<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!--content-list-wrap-->
<div class="content-list-wrap">
    <div class="mui-content mui-scroll-wrapper" id="contentListWrap">
        <div class="mui-scroll">
            <div class="inner-list">
                <div id="contentList"></div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="tplList">
    {{each resultList.list as value}}
    <a data-id="{{value.id}}" class="list-row {{if value.theme_img3}}three-row{{/if}}">
        <div class="inner">
            <div class="item text">
                <h2 data-id="{{value.id}}" class="detail">{{value.title}}</h2>
                {{if !value.theme_img3}}
                <p class="tag">
                    <span>{{formatTime value.create_time}}</span>
                    <span>{{value.name}}</span>
                    <span class="delete" data-id="{{value.collect_id}}" >取消</span>
                </p>
                {{/if}}
            </div>
            <div class="item thumb detail" data-id="{{value.id}}">
                {{if value.theme_img1}}
                <span class="cell"><img src="{{value.theme_img1}}" alt=""></span>
                {{/if}}
                {{if value.theme_img2}}
                <span class="cell"><img src="{{value.theme_img2}}" alt=""></span>
                {{/if}}
                {{if value.theme_img3}}
                <span class="cell"><img src="{{value.theme_img3}}" alt=""></span>
                {{/if}}
            </div>
            {{if value.theme_img3}}
            <div class="item bottom">
                <p class="tag">
                    <span>{{formatTime value.create_time}}</span>
                    <span>{{value.name}}</span>
                    <span class="delete" data-id="{{value.collect_id}}" >取消</span>
                </p>
            </div>
            {{/if}}
        </div>
    </a>
    {{/each}}
</script>
<script>
    var _textIndex = 1, total_page = 0;

    //上拉加载数据
    function pullUp2Refresh() {
        var _this = this;
        //如果存在数据，则继续添加数据
        if (_textIndex < total_page) {
            $.ajax({
                url: _basePath + "/app/member/collectList",
                data: {
                    curPage: _textIndex + 1
                },
                dataType: 'json',
                success: function (data) {
                    total_page = data.resultList.totalPage;
                    var _html = template('tplList', data);
                    $("#contentList").append(_html);

                    _textIndex++;

                    //如果存在数据，则继续添加数据
                    if (_textIndex < total_page) {
                        _this.endPullupToRefresh(false);
                    } else {
                        _this.endPullupToRefresh(true);
                    }
                }
            });

        } else {
            _this.endPullupToRefresh(true);
        }

    }

    function loadInfoData() {
        $.ajax({
            url: _basePath + "/app/member/collectList",
            dataType: 'json',
            success: function (data) {
                if(undefined != typeof data.resultList && data.resCode == 0) {
                    total_page = data.resultList.totalPage;
                    var _html = template('tplList', data);
                    $("#contentList").append(_html);
                    initPullUp();
                }else {
                    mui.toast(data['message'])
                }
            }
        });
    }


    $(function () {
        loadInfoData();

        mui('body').on("tap", ".detail",function () {
            var _id = $(this).data("id");
            mui.openWindow({
                url:_basePath + "app/page?pv=info_detail&id=" +_id
            })
        });

        //取消收藏
        mui('body').on("tap", ".delete",function (event) {
           var _id = $(this).data("id");
            $.ajax({
                url: _basePath + "/app/member/cancel",
                dataType: 'json',
                data: {
                    id: _id
                },
                success: function (data) {
                    if(undefined != typeof data.resultList && data.resCode == 0) {
                        mui.toast("取消成功");
                        $("#contentList").html("");
                        loadInfoData();
                    }else {
                        mui.toast(data['message'])
                    }
                }
            });
        });
    });

    function initPullUp() {
        //初始化上拉加载
        mui.init({
            pullRefresh: {
                container: 'div#contentListWrap',//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
                up: {
                    height: 50,//可选.默认50.触发上拉加载拖动距离
                    auto: true,//可选,默认false.自动上拉加载一次
                    contentrefresh: "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
                    contentnomore: '我是有底线的',//可选，请求完毕若没有更多数据时显示的提醒内容；
                    callback: pullUp2Refresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                }
            }
        });
    }
</script>
